<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>像素策略：资源战争</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Press Start 2P', 'Courier New', monospace;
        }
        
        body {
            background: linear-gradient(135deg, #1a1f2d, #0d1117);
            color: #e0e0ff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
            overflow-x: hidden;
        }
        
        .game-container {
            display: flex;
            flex-direction: column;
            max-width: 1000px;
            width: 100%;
            background: rgba(10, 15, 30, 0.8);
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0, 100, 255, 0.4);
            border: 2px solid #4a6fcb;
            overflow: hidden;
            margin-bottom: 20px;
        }
        
        header {
            background: linear-gradient(90deg, #2a3f8f, #1a2a6c);
            padding: 15px;
            text-align: center;
            border-bottom: 4px solid #4a6fcb;
        }
        
        h1 {
            font-size: 28px;
            color: #f0f8ff;
            text-shadow: 0 0 10px rgba(100, 180, 255, 0.8);
            margin-bottom: 5px;
            letter-spacing: 2px;
        }
        
        .subtitle {
            font-size: 14px;
            color: #a0d0ff;
            margin-bottom: 10px;
        }
        
        .stats-bar {
            display: flex;
            justify-content: space-between;
            background: rgba(20, 30, 60, 0.9);
            padding: 10px 20px;
            border-bottom: 2px solid #4a6fcb;
        }
        
        .resource {
            display: flex;
            align-items: center;
            font-size: 16px;
        }
        
        .resource-icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            background: #555;
            border: 1px solid #aaa;
        }
        
        .game-area {
            display: flex;
            min-height: 500px;
        }
        
        .main-content {
            display: flex;
            flex: 1;
            padding: 15px;
        }
        
        .game-map {
            flex: 3;
            display: grid;
            grid-template-columns: repeat(20, 24px);
            grid-template-rows: repeat(20, 24px);
            gap: 1px;
            background: #0a1429;
            padding: 10px;
            border: 2px solid #3a5ca9;
            border-radius: 4px;
            box-shadow: inset 0 0 15px rgba(0, 40, 100, 0.7);
        }
        
        .tile {
            width: 24px;
            height: 24px;
            background: #1e2a4a;
            border: 1px solid rgba(70, 100, 170, 0.3);
            transition: all 0.1s ease;
            position: relative;
        }
        
        .tile:hover {
            transform: scale(1.1);
            z-index: 10;
            box-shadow: 0 0 8px rgba(100, 180, 255, 0.6);
        }
        
        .water {
            background: #2a5a8c;
        }
        
        .grass {
            background: #3a7a4a;
        }
        
        .forest {
            background: #2a5a3a;
        }
        
        .mountain {
            background: #8a7a6a;
        }
        
        .gold {
            background: #d4af37;
        }
        
        .base {
            background: #8a2be2;
            position: relative;
        }
        
        .base::after {
            content: "🏰";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 16px;
        }
        
        .unit {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 18px;
            z-index: 5;
            text-shadow: 1px 1px 2px black;
        }
        
        .side-panel {
            flex: 1;
            background: rgba(15, 25, 50, 0.8);
            margin-left: 15px;
            padding: 15px;
            border: 2px solid #4a6fcb;
            border-radius: 4px;
            display: flex;
            flex-direction: column;
            min-width: 250px;
        }
        
        .panel-section {
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #3a5ca9;
        }
        
        .panel-title {
            font-size: 18px;
            color: #70c0ff;
            margin-bottom: 15px;
            padding-bottom: 5px;
            border-bottom: 2px solid #3a5ca9;
        }
        
        .actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        
        .btn {
            background: linear-gradient(180deg, #4a6fcb, #2a4a9a);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 0 #1a2a6c;
            text-align: center;
        }
        
        .btn:hover {
            background: linear-gradient(180deg, #5a8feb, #3a5aca);
            transform: translateY(-2px);
            box-shadow: 0 6px 0 #1a2a6c;
        }
        
        .btn:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0 #1a2a6c;
        }
        
        .btn:disabled {
            background: #555;
            transform: none;
            box-shadow: 0 2px 0 #333;
            cursor: not-allowed;
        }
        
        .unit-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        
        .unit-item {
            display: flex;
            align-items: center;
            padding: 8px;
            background: rgba(30, 50, 90, 0.6);
            border-radius: 4px;
            border: 1px solid #4a6fcb;
        }
        
        .unit-icon {
            margin-right: 10px;
            font-size: 20px;
        }
        
        .unit-info {
            flex: 1;
        }
        
        .unit-name {
            font-size: 14px;
            margin-bottom: 3px;
        }
        
        .unit-stats {
            font-size: 11px;
            color: #a0d0ff;
        }
        
        .build-queue {
            background: rgba(10, 20, 40, 0.7);
            padding: 10px;
            border-radius: 4px;
            min-height: 80px;
            border: 1px solid #3a5ca9;
        }
        
        .queue-item {
            display: inline-block;
            padding: 6px 10px;
            background: rgba(70, 100, 170, 0.5);
            border-radius: 4px;
            margin: 3px;
            font-size: 12px;
        }
        
        .events-log {
            flex: 1;
            background: rgba(10, 20, 40, 0.7);
            padding: 10px;
            border-radius: 4px;
            overflow-y: auto;
            max-height: 120px;
            border: 1px solid #3a5ca9;
            font-size: 12px;
        }
        
        .event {
            padding: 5px 0;
            border-bottom: 1px dashed #3a5ca9;
        }
        
        .instructions {
            background: rgba(15, 25, 50, 0.8);
            padding: 20px;
            border-radius: 8px;
            max-width: 1000px;
            width: 100%;
            border: 2px solid #4a6fcb;
            margin-bottom: 20px;
        }
        
        .instructions h2 {
            color: #70c0ff;
            margin-bottom: 15px;
            font-size: 20px;
        }
        
        .instructions ul {
            padding-left: 20px;
            margin-bottom: 15px;
        }
        
        .instructions li {
            margin-bottom: 8px;
            font-size: 14px;
            line-height: 1.5;
        }
        
        .highlight {
            color: #ffcc00;
            font-weight: bold;
        }
        
        .game-over {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 100;
        }
        
        .game-over h2 {
            font-size: 48px;
            color: #ff3333;
            text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
            margin-bottom: 30px;
        }
        
        .restart-btn {
            background: linear-gradient(180deg, #ff5555, #cc0000);
            padding: 15px 40px;
            font-size: 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
        }
        
        footer {
            margin-top: auto;
            padding: 15px;
            font-size: 12px;
            color: #6080b0;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            .game-area {
                flex-direction: column;
            }
            
            .side-panel {
                margin-left: 0;
                margin-top: 15px;
            }
            
            .game-map {
                grid-template-columns: repeat(20, 16px);
                grid-template-rows: repeat(20, 16px);
            }
            
            .tile {
                width: 16px;
                height: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <header>
            <h1>像素策略：资源战争</h1>
            <div class="subtitle">收集资源 • 建造基地 • 组建军队 • 征服敌人</div>
        </header>
        
        <div class="stats-bar">
            <div class="resource">
                <div class="resource-icon" style="background: #d4af37;"></div>
                <span id="gold">100</span>
            </div>
            <div class="resource">
                <div class="resource-icon" style="background: #3a7a4a;"></div>
                <span id="wood">50</span>
            </div>
            <div class="resource">
                <div class="resource-icon" style="background: #8a7a6a;"></div>
                <span id="stone">30</span>
            </div>
            <div class="resource">
                <div class="resource-icon" style="background: #ff5555;"></div>
                <span id="energy">100/100</span>
            </div>
        </div>
        
        <div class="game-area">
            <div class="main-content">
                <div class="game-map" id="gameMap">
                    <!-- 地图由JS动态生成 -->
                </div>
                
                <div class="side-panel">
                    <div class="panel-section">
                        <div class="panel-title">行动</div>
                        <div class="actions">
                            <button class="btn" id="collectBtn">收集资源</button>
                            <button class="btn" id="buildBtn">建造设施</button>
                            <button class="btn" id="attackBtn">攻击敌人</button>
                            <button class="btn" id="healBtn">恢复能量</button>
                        </div>
                    </div>
                    
                    <div class="panel-section">
                        <div class="panel-title">单位</div>
                        <div class="unit-list">
                            <div class="unit-item">
                                <div class="unit-icon">⚔️</div>
                                <div class="unit-info">
                                    <div class="unit-name">士兵</div>
                                    <div class="unit-stats">攻击: 5 | 防御: 3 | 消耗: 20金</div>
                                </div>
                                <button class="btn" style="padding: 5px 10px;">训练</button>
                            </div>
                            <div class="unit-item">
                                <div class="unit-icon">🏹</div>
                                <div class="unit-info">
                                    <div class="unit-name">弓箭手</div>
                                    <div class="unit-stats">攻击: 4 | 防御: 2 | 消耗: 15金 10木</div>
                                </div>
                                <button class="btn" style="padding: 5px 10px;">训练</button>
                            </div>
                            <div class="unit-item">
                                <div class="unit-icon">🛡️</div>
                                <div class="unit-info">
                                    <div class="unit-name">骑士</div>
                                    <div class="unit-stats">攻击: 7 | 防御: 5 | 消耗: 40金 20石</div>
                                </div>
                                <button class="btn" style="padding: 5px 10px;">训练</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="panel-section">
                        <div class="panel-title">建造队列</div>
                        <div class="build-queue" id="buildQueue">
                            <div class="queue-item">兵营 (3s)</div>
                            <div class="queue-item">农场 (5s)</div>
                        </div>
                    </div>
                    
                    <div class="panel-section" style="flex: 1;">
                        <div class="panel-title">事件日志</div>
                        <div class="events-log" id="eventLog">
                            <div class="event">[系统] 游戏开始！收集资源建立你的基地。</div>
                            <div class="event">[发现] 在(5,7)找到金矿！</div>
                            <div class="event">[建造] 木材厂建造完成。</div>
                            <div class="event">[战斗] 士兵击败了敌方侦察兵！</div>
                            <div class="event">[警告] 基地北面发现敌人部队！</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="instructions">
        <h2>游戏指南</h2>
        <ul>
            <li>使用资源<span class="highlight">（金、木材、石头）</span>建造设施和训练单位</li>
            <li>点击<span class="highlight">"收集资源"</span>按钮收集你所在位置的资源</li>
            <li>建造<span class="highlight">农场</span>增加食物产量，<span class="highlight">兵营</span>训练士兵</li>
            <li>训练不同单位组成军队，攻击敌方基地</li>
            <li>保持<span class="highlight">能量</span>充足以执行更多操作</li>
            <li>最终目标：<span class="highlight">摧毁敌方基地</span>取得胜利！</li>
        </ul>
    </div>
    
    <footer>
        Pixel Strategy: Resource War | 使用HTML5、CSS3和JavaScript构建 | 为浏览器游戏设计
    </footer>
    
    <script>
        // 游戏状态
        const gameState = {
            gold: 100,
            wood: 50,
            stone: 30,
            energy: 100,
            maxEnergy: 100,
            selectedTile: null,
            units: [],
            buildings: [],
            events: []
        };
        
        // 地图配置
        const MAP_SIZE = 20;
        const TILE_TYPES = [
            { type: 'grass', class: 'grass', probability: 0.5 },
            { type: 'forest', class: 'forest', probability: 0.2 },
            { type: 'mountain', class: 'mountain', probability: 0.15 },
            { type: 'water', class: 'water', probability: 0.1 },
            { type: 'gold', class: 'gold', probability: 0.05 }
        ];
        
        // 单位类型
        const UNIT_TYPES = {
            worker: { name: '工人', icon: '👷', cost: { gold: 10 }, attack: 1, defense: 1 },
            soldier: { name: '士兵', icon: '⚔️', cost: { gold: 20 }, attack: 5, defense: 3 },
            archer: { name: '弓箭手', icon: '🏹', cost: { gold: 15, wood: 10 }, attack: 4, defense: 2 },
            knight: { name: '骑士', icon: '🛡️', cost: { gold: 40, stone: 20 }, attack: 7, defense: 5 }
        };
        
        // 初始化游戏
        function initGame() {
            generateMap();
            placeBase();
            updateResources();
            
            // 添加事件监听器
            document.getElementById('collectBtn').addEventListener('click', collectResources);
            document.getElementById('buildBtn').addEventListener('click', buildStructure);
            document.getElementById('attackBtn').addEventListener('click', attackEnemy);
            document.getElementById('healBtn').addEventListener('click', healEnergy);
            
            // 初始事件
            addEvent("游戏开始！收集资源建立你的基地。");
            addEvent("在(5,7)找到金矿！");
            addEvent("木材厂建造完成。");
            addEvent("士兵击败了敌方侦察兵！");
            addEvent("警告：基地北面发现敌人部队！");
        }
        
        // 生成地图
        function generateMap() {
            const mapElement = document.getElementById('gameMap');
            mapElement.innerHTML = '';
            
            for (let y = 0; y < MAP_SIZE; y++) {
                for (let x = 0; x < MAP_SIZE; x++) {
                    const tile = document.createElement('div');
                    tile.className = 'tile';
                    tile.dataset.x = x;
                    tile.dataset.y = y;
                    
                    // 随机分配地形
                    const rand = Math.random();
                    let cumulativeProb = 0;
                    let tileType = 'grass';
                    
                    for (const type of TILE_TYPES) {
                        cumulativeProb += type.probability;
                        if (rand < cumulativeProb) {
                            tileType = type.type;
                            tile.classList.add(type.class);
                            break;
                        }
                    }
                    
                    // 特殊位置 - 玩家基地
                    if (x === 2 && y === 2) {
                        tile.classList.add('base');
                    }
                    
                    // 特殊位置 - 敌方基地
                    if (x === 17 && y === 17) {
                        tile.classList.add('base');
                        tile.style.background = '#c22';
                    }
                    
                    tile.addEventListener('click', () => selectTile(x, y));
                    mapElement.appendChild(tile);
                }
            }
        }
        
        // 放置基地
        function placeBase() {
            const playerBase = document.querySelector(`.tile[data-x="2"][data-y="2"]`);
            playerBase.classList.add('base');
            
            const enemyBase = document.querySelector(`.tile[data-x="17"][data-y="17"]`);
            enemyBase.classList.add('base');
            enemyBase.style.background = '#c22';
        }
        
        // 选择地块
        function selectTile(x, y) {
            // 清除之前的选择
            const prevSelected = document.querySelector('.tile.selected');
            if (prevSelected) prevSelected.classList.remove('selected');
            
            // 设置新选择
            const tile = document.querySelector(`.tile[data-x="${x}"][data-y="${y}]`);
            tile.classList.add('selected');
            
            gameState.selectedTile = { x, y };
            console.log(`选中地块: (${x}, ${y})`);
        }
        
        // 收集资源
        function collectResources() {
            if (gameState.energy < 10) {
                addEvent("能量不足，无法收集资源！");
                return;
            }
            
            if (!gameState.selectedTile) {
                addEvent("请先选择一个地块！");
                return;
            }
            
            const tile = document.querySelector(`.tile[data-x="${gameState.selectedTile.x}"][data-y="${gameState.selectedTile.y}]`);
            
            if (tile.classList.contains('forest')) {
                gameState.wood += 10;
                addEvent(`从森林收集了10木材`);
            } 
            else if (tile.classList.contains('mountain')) {
                gameState.stone += 5;
                addEvent(`从矿山收集了5石头`);
            }
            else if (tile.classList.contains('gold')) {
                gameState.gold += 15;
                addEvent(`从金矿收集了15金币`);
            }
            else {
                addEvent(`该地块没有资源可收集`);
                return;
            }
            
            gameState.energy -= 10;
            updateResources();
            
            // 添加动画效果
            tile.style.transform = 'scale(1.2)';
            setTimeout(() => {
                tile.style.transform = 'scale(1)';
            }, 300);
        }
        
        // 建造建筑
        function buildStructure() {
            if (gameState.energy < 20) {
                addEvent("能量不足，无法建造！");
                return;
            }
            
            if (!gameState.selectedTile) {
                addEvent("请先选择一个地块！");
                return;
            }
            
            const tile = document.querySelector(`.tile[data-x="${gameState.selectedTile.x}"][data-y="${gameState.selectedTile.y}]`);
            
            if (tile.classList.contains('base')) {
                addEvent("不能在基地上建造其他建筑！");
                return;
            }
            
            if (tile.classList.contains('water') || tile.classList.contains('mountain')) {
                addEvent("该地形不适合建造！");
                return;
            }
            
            // 随机建造一种建筑
            const buildings = ['农场', '木材厂', '兵营', '箭塔'];
            const building = buildings[Math.floor(Math.random() * buildings.length)];
            const cost = Math.floor(Math.random() * 30) + 20;
            
            if (gameState.gold < cost) {
                addEvent(`金币不足，无法建造${building} (需要${cost}金)`);
                return;
            }
            
            gameState.gold -= cost;
            gameState.energy -= 20;
            
            addEvent(`建造了${building}，消耗${cost}金币`);
            updateResources();
            
            // 添加建造效果
            tile.innerHTML = `<div class="unit">🏠</div>`;
            tile.style.backgroundColor = '#5a4';
        }
        
        // 攻击敌人
        function attackEnemy() {
            if (gameState.energy < 15) {
                addEvent("能量不足，无法攻击！");
                return;
            }
            
            // 随机战斗结果
            const outcomes = [
                "击退了敌人的进攻！",
                "你的部队遭遇伏击，损失惨重！",
                "成功突袭敌方资源点！",
                "双方势均力敌，战斗陷入僵局。",
                "大获全胜！缴获敌方物资。"
            ];
            
            const outcome = outcomes[Math.floor(Math.random() * outcomes.length)];
            const goldGain = Math.floor(Math.random() * 30);
            const loss = Math.floor(Math.random() * 20);
            
            gameState.gold += goldGain;
            gameState.wood -= loss;
            gameState.stone -= loss;
            gameState.energy -= 15;
            
            if (gameState.wood < 0) gameState.wood = 0;
            if (gameState.stone < 0) gameState.stone = 0;
            
            addEvent(`战斗结果: ${outcome} ${goldGain > 0 ? '获得' + goldGain + '金币' : ''} ${loss > 0 ? '损失' + loss + '资源' : ''}`);
            updateResources();
        }
        
        // 恢复能量
        function healEnergy() {
            const cost = 10;
            
            if (gameState.gold < cost) {
                addEvent(`金币不足，无法恢复能量 (需要${cost}金)`);
                return;
            }
            
            gameState.gold -= cost;
            gameState.energy = gameState.maxEnergy;
            addEvent(`恢复了全部能量，消耗${cost}金币`);
            updateResources();
        }
        
        // 添加事件
        function addEvent(message) {
            const eventLog = document.getElementById('eventLog');
            const eventElement = document.createElement('div');
            eventElement.className = 'event';
            eventElement.textContent = `[${getGameTime()}] ${message}`;
            
            eventLog.prepend(eventElement);
            
            // 限制日志数量
            if (eventLog.children.length > 15) {
                eventLog.removeChild(eventLog.lastChild);
            }
        }
        
        // 获取游戏时间
        function getGameTime() {
            const minutes = Math.floor(gameState.energy / 10);
            return `${minutes.toString().padStart(2, '0')}:00`;
        }
        
        // 更新资源显示
        function updateResources() {
            document.getElementById('gold').textContent = gameState.gold;
            document.getElementById('wood').textContent = gameState.wood;
            document.getElementById('stone').textContent = gameState.stone;
            document.getElementById('energy').textContent = `${gameState.energy}/${gameState.maxEnergy}`;
        }
        
        // 初始化游戏
        window.onload = initGame;
    </script>
</body>
</html>
